<script setup lang="ts">
import { getUserListApi, loginDeleteApi } from '@/apis/user'
import updateDialog from './components/updateDialog.vue'
import { ElMessage } from 'element-plus'
import { useHandleData } from "@/hooks/useHandleData";
import { getDeptListApi } from "@/apis/dept"

const tableData = ref([])

/** 搜索 */
const searchParams = ref({
    account: ''
})

/** 弹窗属性 */
const dialogOptions = reactive({
    show: false,
    info: {}
})

/** 获取基础价格列表 */
const getList = async () => {
    const data = await getUserListApi(searchParams.value)
    tableData.value = data.list
}


/** 打开编辑弹窗 */
const openEdit = (row) => {
    dialogOptions.info = row
    dialogOptions.show = true
}

/** 格式化时间 */
const formatTime = (row) => {
    return new Date(row.create_time).toLocaleString()
}

/** 格式化性别 */
const formatSex = (row) => {
    return row.gender === 1 ? '男' : '女'
}

/** 格式化权限 */
const formatAuth = (row) => {
    return row.auth === 1? '超级管理员' : '普通管理员'
}

/** 删除 */
const handleDelete = async (params) => {
    await useHandleData(loginDeleteApi, { id: params._id }, `删除【${params.nickname}】用户`);
    getList()
}

/** 部门信息 */
const deptList = ref([])

/** 获取所有部门信息 */
const getDeptList = async () => {
    const data = await getDeptListApi({})
    deptList.value = data.list
}

/** 格式化所有部门信息 */
const formatDept = (row) => {
    return deptList.value.filter(item => row.departmentIds.includes(item._id)).map(item => item.deptName)
}

onMounted(async () => {
    await getDeptList()
    getList()
})
</script>
<template>
    <div class="user-manage-container">
        <div class="search-box">
            <el-form inline>
                <el-form-item label="账号">
                    <el-input v-model="searchParams.account" placeholder="请输入账号" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList">搜索</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="table-box">
            <div class="operate-btn">
                <el-button type="primary" @click="openEdit({})">新增</el-button>
            </div>
            <el-table border :data="tableData" stripe style="width: 100%">
                <el-table-column prop="account" label="账号" />
                <el-table-column prop="nickname" label="用户昵称" />
                <el-table-column prop="gender" label="性别" :formatter="formatSex" />
                <el-table-column prop="auth" label="权限" :formatter="formatAuth" />
                <el-table-column prop="departmentIds" label="管理部门" :formatter="formatDept" />
                <el-table-column prop="create_time" label="创建时间"  :formatter="formatTime" />
                <el-table-column fixed="right" width="140" label="操作" align="center">
                    <template v-slot="scope">
                        <el-button text type="primary" size="small" @click="openEdit(scope.row)">编辑</el-button>
                        <el-button text type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <update-dialog :deptList="deptList" :info="dialogOptions.info" v-model:visible="dialogOptions.show" @confirm="getList"></update-dialog>
    </div>
</template>

<style lang="scss" scoped>
.user-manage-container {}
</style>